import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import LoginForm from '../components/auth/LoginForm'
import RegisterForm from '../components/auth/RegisterForm'

type AuthMode = 'login' | 'register'

export default function AuthPage() {
  const [mode, setMode] = useState<AuthMode>('login')
  const navigate = useNavigate()
  const { login } = useAuth()

  const handleAuthSuccess = (user: any, token: string) => {
    login(user, token)
    navigate('/')
  }

  return (
    <div className="min-h-screen flex items-center justify-center py-12">
      <div className="container">
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold mb-4">AI Prompt Hub</h1>
          <p className="text-lg text-muted">发现和分享最佳 AI 提示词</p>
        </div>
        
        {mode === 'login' ? (
          <LoginForm
            onSuccess={handleAuthSuccess}
            onSwitchToRegister={() => setMode('register')}
          />
        ) : (
          <RegisterForm
            onSuccess={handleAuthSuccess}
            onSwitchToLogin={() => setMode('login')}
          />
        )}
      </div>
    </div>
  )
}